<template>
	<view class="content switch_tab_page" :style="{ backgroundColor: currentIndex == 1 && userIdentity == 1 ? '#f8f8f8' : '#FFF' }">
		<!-- 	<hx-navbar v-if="currentIndex == 0 || currentIndex == 3" title=" " :back="false" :showLoading="showNavigationBarLoading" :fixed="true" barPlaceholder="hidden" transparent="auto" :background-color="currentIndex == 0?(scrollData.scrollTop>233?[120, 60, 247]:''):''" :pageScroll.sync="scrollData" /> -->
		<hx-navbar
			v-if="currentIndex == 0 || currentIndex == 3"
			title=" "
			:back="false"
			:showLoading="showNavigationBarLoading"
			:fixed="true"
			barPlaceholder="hidden"
			transparent="auto"
			:background-color="currentIndex == 0 ? '' : ''"
			:pageScroll.sync="scrollData"
		/>
		<hx-navbar
			v-if="(currentIndex == 1 && userIdentity == 0) || currentIndex == 2"
			:background-color="currentIndex == 1 ? [248, 248, 248] : ''"
			:back="false"
			:fixed="true"
			:left-slot="false"
			:right-slot="false"
		>
			<view class="navbar-solt-view">
				<text v-if="showNavigationBarLoading" class="weui-loading"></text>
				<image class="navbar-line-height" :src="imgPrefix('/static/image/icon/tab_logo.png')"></image>
			</view>
		</hx-navbar>
		<hx-navbar v-if="currentIndex == 1 && userIdentity == 1" title="课程表" :back="false" :fixed="true" bar-placeholder="hidden" color="#000000" />
		<view v-show="currentIndex == 0"><tab-index ref="tabIndex" :currentIndex="currentIndex" @navigation-loading="parentNavigationBarLoading"></tab-index></view>
		<view v-show="currentIndex == 1">
			<tab-view ref="tabView" :currentIndex="currentIndex" @navigation-loading="parentNavigationBarLoading" @setUserIdentity="parentSetUserIdentity"></tab-view>
		</view>
		<view v-show="currentIndex == 2"><tab-message ref="tabMessage" :currentIndex="currentIndex" @navigation-loading="parentNavigationBarLoading"></tab-message></view>
		<view v-show="currentIndex == 3"><tab-mine ref="tabMine" :currentIndex="currentIndex" @navigation-loading="parentNavigationBarLoading"></tab-mine></view>
		<tab-bar :current="currentIndex" :backgroundColor="currentIndex == 0 || currentIndex == 2 ? '' : '#ffffff'"></tab-bar>
	</view>
</template>

<script>
// 自定义底部 star
import tabBar from '@/components/tabbar/index.vue';
// 自定义底部 end
import tabIndex from '@/pages/components/tab_index/index.vue';
import tabMessage from '@/pages/components/tab_message/index.vue';
import tabMine from '@/pages/components/tab_mine/index.vue';
import tabView from '@/pages/components/tab_view/index.vue';
import { commonMixinFun } from '@/static/mixins/common.js';
import { shareApp } from '@/static/uitls/common.js';
const app = getApp();
export default {
	name: 'project-index',
	mixins: [commonMixinFun],
	components: {
		tabIndex,
		tabMessage,
		tabMine,
		tabView,
		tabBar
	},
	data() {
		return {
			optionData: {}, // 页面传参
			showNavigationBarLoading: false, //是否为加载状态
			pageScrollTop: [0, 0, 0, 0], //存各页面滚动的top值 用于切换时无缝定位
			scrollData: {}, // 存当前滚动的top值
			currentIndex: app.globalData.currentTab, // tabIndex
			backgroundColor: ['#7542DD', '#ffffff'],
			backgroundColorIndex: 0
		};
	},
	onLoad(option) {
		// app._log(option);
		this.optionData = option;
		this.observe(app.globalData, 'currentTab', this.watchCurrentTab); // 开启监听底部栏index变化
	},
	onShow() {
		this.$refs.tabIndex.setHide(false);
		this.setComponentsShow();
	},
	//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
	onPageScroll(e) {
		this.scrollData = e;
		// #ifdef MP
		let { currentIndex, backgroundColor, backgroundColorIndex } = this;
		if (currentIndex == 0) {
			// 有点慢
			if (e.scrollTop < 100 && backgroundColorIndex != 0) {
				this.backgroundColorIndex = 0;
				uni.setBackgroundColor({ backgroundColor: backgroundColor[0] });
			} else if (e.scrollTop > 100 && backgroundColorIndex != 1) {
				this.backgroundColorIndex = 1;
				uni.setBackgroundColor({ backgroundColor: backgroundColor[1] });
			}
		}
		// #endif
	},
	methods: {
		parentSetUserIdentity() {
			console.log('改值了没啊');
			this.userIdentity = app.globalData.userIdentity;
		},
		//设置组件的onload/onshow
		setComponentsShow() {
			let { currentIndex, optionData } = this;
			switch (currentIndex) {
				case 0:
					this.$refs.tabIndex.componentsShow(optionData);
					// #ifdef MP
					uni.setBackgroundColor({ backgroundColor: '#7542DD' });
					// #endif
					break;
				case 1:
					this.$refs.tabView.componentsShow(optionData);
					// #ifdef MP
					uni.setBackgroundColor({ backgroundColor: '#ffffff' });
					// #endif
					break;
				case 2:
					this.$refs.tabMessage.componentsShow(optionData);
					// #ifdef MP
					uni.setBackgroundColor({ backgroundColor: '#ffffff' });
					// #endif
					break;
				case 3:
					this.$refs.tabMine.componentsShow(optionData);
					// #ifdef MP
					uni.setBackgroundColor({ backgroundColor: '#7542DD' }); // 没必要了，页面上已经禁止了
					// #endif
					break;
				default:
					break;
			}
		},
		// 设置页面的滚动距离，通知子组件onload/onshow  监听到全局的下标变化时触发
		watchCurrentTab(oldVal, newVal) {
			app._log('watchCurrentTab旧下标：', oldVal, '新下标：' + newVal);
			this.userIdentity = app.globalData.userIdentity;
			let { pageScrollTop, scrollData } = this;
			pageScrollTop[oldVal] = scrollData.scrollTop;
			this.currentIndex = newVal;
			//将页面滚动到之前离开该页面时滚动的位置
			this.setComponentsShow(); // 发生改变后通知对应组件页面触发onload/onshow
			try {
				app._log(pageScrollTop[Number(newVal)]);
				uni.pageScrollTo({
					scrollTop: pageScrollTop[Number(newVal)],
					duration: 0
				});
			} catch {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			}
		},
		// 子页面通知父页面设置加载状态
		parentNavigationBarLoading(newVal) {
			// app._log(newVal);
			// app._log('页面上需要更新为',newVal)
			this.showNavigationBarLoading = newVal;
		}
	},
	// 页面分享
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			app._log(res.target);
		}
		return {
			title: '可语小程序',
			imageUrl: this.imgPrefix('/static/image/share_cover.png'),
			path: '/pages/teacher/login_identity/index'
		};
	},
	//下拉刷新
	// onPullDownRefresh() {
	// 	app._log('下拉刷新');
	// 	let { currentIndex } = this;
	// 	switch (currentIndex) {
	// 		case 0:
	// 			uni.stopPullDownRefresh();
	// 			break;
	// 		case 1:
	// 			break;
	// 		case 2:
	// 			break;
	// 		case 3:
	// 			// uni.stopPullDownRefresh();
	// 			break;
	// 		default:
	// 			break;
	// 	}
	// },

	//触底加载更多

	onReachBottom(e) {
		// app._log('触底加载更多');
		if(this.currentIndex==1){
			this.$refs.tabView.comReachBottom();
		}
	},
	onHide(){
		this.$refs.tabIndex.setHide(true);
	}
};
</script>

<style scoped>
/* =============== 以下结果追加于: 2020/7/4 上午11:10:13 =============== */

.navbar-solt-view {
	position: fixed;
	left: 0rpx;
	width: 100vw;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.navbar-line-height {
	width: 86rpx;
	height: 38.9rpx;
}

/* .switch_tab_page {
	background-color: #fff;
} */
</style>
